<!-- 商城订单详情 -->
<template>
	<view class="orderDetail">
		<view class="header">
			<view class="orderStatus">
				<image :src="orderData.status == 3?'../static/images/yiwanc.png':'../static/images/wef.png'" mode=""></image>
				<text>{{orderData._status?orderData._status._title:''}}</text>
				<view class="a"></view>
				<view class="b"></view>
			</view>
		</view>

		<view class="site">
			<view class="son">
				<view class="name">
					<text>{{orderData.real_name}}</text>
					<text>{{orderData.user_phone}}</text>
				</view>
				<text class="sit">地址：{{orderData.user_address}}</text>
			</view>
		</view>
		<!-- 订单信息  收货 -->
		<view class="messages" v-if="orderData.paid !== 0">
			<!-- 第一排 -->
			<view class="express">
				<image src="../static/images/awd.png" mode=""></image>
				<view class="son" v-if="orderData.status == 0&&orderData.paid == 1">
					<text class="clamp">订单已提交，请等待公司发货</text>
					<text>{{orderData._add_time}}</text>
				</view>
				<view class="son" v-if="orderData.status == 1||orderData.status == 2||orderData.status == 3" @tap="express">
					<text class="clamp">{{expressfirtinfo}}</text>
					<text>{{expressfirttime}}</text>
				</view>
				<text class="yticon icon-you"></text>
			</view>
		</view>
		<!-- 标题 -->
		<view class="storeTitle" @tap="goStore(orderData.seller_id)">
			<image :src="orderData.online_logo" mode=""></image>
			<text class="title">{{orderData.online_name}}</text>
			<text class="yticon icon-you"></text>
		</view>
		<!-- 商品列表 -->
		<view class="titleitem">
			<view class="item" v-for="(item, index) in orderData.cartInfo" :key="index" @tap="goGoods(item.product_id)">
				<!-- 图片 -->
				<view class="img">
					<image :src="item.productInfo.image" mode=""></image>
				</view>
				<!-- 信息 -->
				<view class="msg">
					<text class="clamp1 clamp">{{item.productInfo.store_name}}</text>
					<view class="a">
						<text class="clamp">{{item.productInfo.attrInfo?item.productInfo.attrInfo.suk:''}}</text>
						<text>× {{item.cart_num}}</text>
					</view>
					<view class="b">
						<text class="refunding" v-if="item.return_status == 1">退货中</text>
						<text class="refunding" v-else-if="item.return_status == 2">已退货</text>
						<text v-else></text>
						<view v-if="item.productInfo.attrInfo"><text>￥</text><text>{{item.productInfo.attrInfo.price}}</text></view>
						<view v-else><text>￥</text><text>{{item.productInfo.price}}</text></view>
					</view>
				</view>
			</view>
		</view>
		<view class="info">
			<view class="cellBox">
				<view class="cell">
					<text class="a">订单编号:</text>
					<text class="b">{{orderData.order_id}}</text>
					<!-- #ifndef H5 -->
					<text class="c" @tap="copy(1)">复制</text>
					<!-- #endif -->
				</view>
				<view class="cell">
					<text class="a">下单时间:</text>
					<text class="b">{{orderData._add_time}}</text>
				</view>
			</view>
			<view class="cellBox" v-if="orderData.paid == 1">
				<view class="cell">
					<text class="a">支付方式:</text>
					<text class="b">{{orderData._status._payType}}</text>
				</view>
				<view class="cell">
					<text class="a">支付时间:</text>
					<text class="b">{{orderData._pay_time}}</text>
				</view>
			</view>
			<view class="cellBox" v-if="orderData.status == 1||orderData.status == 2||orderData.status == 3">
				<view class="cell">
					<text class="a">快递商家:</text>
					<text class="b">{{orderData.delivery_name}}</text>
				</view>
				<view class="cell">
					<text class="a">快递单号:</text>
					<text class="b">{{orderData.delivery_id}}</text>
					<!-- #ifndef H5 -->
					<text class="c" @tap="copy(2)">复制</text>
					<!-- #endif -->
				</view>
			</view>
		</view>
		<view class="price">
			<view class="cell">
				<text class="a">商品总额:</text>
				<text class="b color">￥ {{orderData.total_price||''}}</text>
			</view>
			<view class="cell" v-if="orderData.gain_conch != 0">
				<text class="a">获得黑贝壳:</text>
				<text class="b">￥ {{Number(orderData.gain_conch).toFixed(2)||''}}</text>
			</view>
			<view class="cell">
				<text class="a">运费:</text>
				<text class="b">+ {{orderData.total_postage||''}}</text>
			</view>
			<view class="cell" v-if="orderData.black_conch_price !=0">
				<text class="a">黑贝壳抵扣:</text>
				<text class="b">- {{orderData.black_conch_price||''}}</text>
			</view>
			<view class="cell" v-if="orderData.yellow_conch_price !=0">
				<text class="a">黄贝壳抵扣:</text>
				<text class="b">- {{orderData.yellow_conch_price||''}}</text>
			</view>
			<view class="cell" v-if="orderData.red_conch_price !=0">
				<text class="a">红贝壳抵扣:</text>
				<text class="b">- {{orderData.red_conch_price||''}}</text>
			</view>
			<view class="cell" v-if="orderData.blue_conch_price !=0">
				<text class="a">蓝贝壳抵扣:</text>
				<text class="b">- {{orderData.blue_conch_price||''}}</text>
			</view>
			<view class="cell" v-if="orderData.now_money_price !=0">
				<text class="a">余额抵扣:</text>
				<text class="b">- {{orderData.now_money_price||''}}</text>
			</view>
			<view class="cellTotal">
				<text class="a">实付款:</text>
				<text class="rmb color">￥</text>
				<text class="b color"> {{orderData.pay_price||''}}</text>
			</view>
		</view>
		<view class="cut"></view>
		<view class="footer">
			<view class="btn contact" @tap="phoneCall">
				联系商家
			</view>
			<view class="btn" v-if="orderData.paid == 0" @tap="cancelOrder(orderData.order_id)">
				取消订单
			</view>
			<view class="btn" v-if="orderData.status == 1&&orderData.order_type == 'normal'" @tap="refund(2)">
				申请退款
			</view>
			<view class="btn" v-if="orderData.paid == 1&&orderData.status == 0&&orderData.order_type == 'normal'" @tap="refund(1)">
				申请退款
			</view>
			<view class="btn" v-if="orderData.paid == 1&&[0,1].includes(orderData.status)&&orderData.order_type == 'service_station'" @tap="refund(3)">
				申请退款
			</view>
			<view class="btn act" v-if="orderData.paid == 0" @tap="checkMoney">
				立即支付
			</view>
			<!-- <view class="btn gray" v-if="orderData.status == 0&&orderData.paid == 1">
				等待收货
			</view> -->
			<!-- <view class="btn" v-if="orderData.status == 3||orderData.status == 2" @tap="goDetail">
				申请开票
			</view> -->
			<view class="btn" v-if="orderData.status == 1||orderData.status == 2||orderData.status == 3" @tap="express">
				查看物流
			</view>
			<view class="btn act" v-if="orderData.status == 1" @tap="queren">
				确认收货
			</view>
			<view class="btn act" v-if="orderData.status == 2" @tap="goComment">
				立即评价
			</view>
			<view class="btn act" v-if="orderData.status == 3" @tap="againBuy">
				再次购买
			</view>
		</view>
		<!-- 退款选择弹层 -->
		<uni-popup ref="popup" type="center">
			<view class="sellerType">
				<image @tap="close" class="close" src="../../static/images/center/close.png" mode=""></image>
				<text class="title">
					选择退款商品
				</text>
				<view class="radioBox">
					<checkbox-group @change="checkboxChange">
						<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in refundGoodslist" :key="index">
							<view class="left">
								<image :src="item.productInfo.image" mode=""></image>
								<view>
									<text class="clamp">{{item.productInfo.store_name}}</text>
									<text>{{item.productInfo.attrInfo?item.productInfo.attrInfo.suk:''}}</text>
								</view>
							</view>
							<view class="right">
								<checkbox color="#FF1F2F" :value="item.id" />
							</view>
						</label>
					</checkbox-group>
				</view>
				<view class="btnBox">
					<view class="btn" @tap="goRefund">申请退款</view>
				</view>
			</view>
		</uni-popup>
		<!-- app选择支付方式 -->
		<choosePay ref="choosePay" @confirm="confirm"></choosePay>
		<!-- 抵扣全部金额输入平台操作密码 -->
		<passkeyborad class="passkeyborad" :show="keyboradShow" @close="keyboradClose" @finish="finished"></passkeyborad>
	</view>
</template>

<script>
	import {
		orderDetail,
		orderCancel,
		orderPay,
		orderExpress,
		orderTake,
		orderAgain
	} from "@/api/mall.js"
	import wechat from '@/common/wechat.js'
	import {
		checkPassword
	} from "@/api/user.js"
	import passkeyborad from '@/components/yzc-paykeyboard/yzc-paykeyboard.vue'
	import choosePay from '@/components/choosePay/choosePay.vue'
	export default {
		components: {
			passkeyborad,
			choosePay
		},
		data() {
			return {
				status: 0,
				id: '',
				type: 0,
				orderData: {},
				title: "",
				time: '',
				provider: "wxpay",
				payType: "weixin",
				// #ifdef MP-WEIXIN
				from: "routine",
				// #endif
				// #ifdef APP-PLUS
				from: "app",
				// #endif
				// #ifdef H5
				from: "weixin",
				// #endif
				expressfirtinfo: '',
				expressfirttime: '',
				cart_id_arr: [], // 选择退货的商品购物车id
				refundGoodslist: [], // 可退款产品列表
				allowedReceive: true, //是否可确认收货，根据是否有商品退货中判断
				keyboradShow: false,
			};
		},
		onLoad(option) {
			this.id = option.id
			this.getOrderDetail()
		},
		onShow() {
			if (uni.getStorageSync("refundRef")) {
				uni.removeStorageSync("refundRef")
				this.getOrderDetail()
			}
		},
		methods: {
			getOrderDetail() {
				this.refundGoodslist = []
				orderDetail(this.id).then(res => {
					this.orderData = res.data
					this.orderData.cartInfo.forEach((item, index) => {
						item.id = item.id.toString()
						if (item.return_status == 0 && item.is_return_goods == 1) {
							this.refundGoodslist.push(item)
						} else if (item.return_status == 1) {
							this.allowedReceive = false
						}
					})
					if (res.data.status == 1 || res.data.status == 2 || res.data.status == 3) {
						orderExpress(this.id).then(res => {
							if(res.data.express.data.length > 0) {
								this.expressfirtinfo = res.data.express.data[0].context
								this.expressfirttime = res.data.express.data[0].time
							} else {
								this.expressfirtinfo = "暂无物流信息"
								this.expressfirttime = "请耐心等待"
							}
						})
					}
				})
			},
			goDetail() {
				uni.navigateTo({
					url: "/pages/center/oneself/seckillPick/logisticsDetail?id=" + this.id
				})
			},
			//取消订单
			cancelOrder(id) {
				uni.showLoading({mask:true})
				orderCancel({
					id: id
				}).then(res => {
					uni.hideLoading()
					uni.setStorageSync('doRefresh', true)
					uni.navigateBack({

					})
				})
			},
			// 联系商家
			phoneCall() {
				uni.makePhoneCall({
					phoneNumber: this.orderData.phone
				})
			},
			// 再次购买
			againBuy(id) {
				uni.showLoading({
					mask:true
				})
				orderAgain({
					uni: this.id
				}).then(res => {
					uni.hideLoading()
					uni.navigateTo({
						url: "/mall/order/createOrder?cartId=" + res.data.cateId
					})
				})
			},
			// 确认订单
			queren() {
				let _this = this
				if (!this.allowedReceive) {
					return uni.showModal({
						content: "订单存在正在退货商品,无法确认收货",
						showCancel: false
					})
				}
				uni.showModal({
					content: "确认收货后，无法进行退货操作，是否确认收货？",
					confirmColor: "#FF1F2F",
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({mask:true})
							orderTake({
								uni: _this.id
							}).then(res => {
								uni.hideLoading()
								uni.redirectTo({
									url: "/mall/order/orderDetail?id=" + _this.id
								})
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			// 查看物流
			express() {
				uni.navigateTo({
					url: "./express?id=" + this.id
				})
			},
			// 申请退款
			refund(type) {
				if (type == 1) {
					if (this.orderData.is_return != 0) {
						return uni.showToast({
							icon: "none",
							title: "订单正在退货中，请到 退换/售后 查看详情"
						})
					}
					uni.navigateTo({
						url: "./refund/refund?oid=" + this.orderData.id + "&type=1"
					})
				} else if (type == 3) {
					if (this.refundGoodslist.length == 0) {
						return uni.showToast({
							icon: "none",
							title: "无可退货商品"
						})
					}
					this.cart_id_arr = []
					this.refundGoodslist.forEach((item, index) => {
						this.cart_id_arr.push(item.id)
					})
					uni.navigateTo({
						url: "./refund/refund?oid=" + this.orderData.id + "&type=2" + "&pid=" + this.cart_id_arr
					})
				} else {
					if (this.refundGoodslist.length == 0) {
						return uni.showToast({
							icon: "none",
							title: "无可退货商品"
						})
					}
					this.$refs.popup.open()
				}
			},
			// 关闭选择退货商品弹窗
			close() {
				this.$refs.popup.close()
			},
			// 选择退款商品
			checkboxChange(e) {
				this.cart_id_arr = e.detail.value
			},
			// 跳转选择退款类型
			goRefund() {
				if (this.cart_id_arr.length == 0) {
					return uni.showToast({
						icon: "none",
						title: "请选择需要退款的商品"
					})
				}
				uni.navigateTo({
					url: "./refund/chooseRefund?oid=" + this.orderData.id + "&cart_id_arr=" + this.cart_id_arr
				})
				this.$refs.popup.close()
			},
			// 去店铺
			goStore(id) {
				uni.navigateTo({
					url: `/mall/product/onlineStore?id=${id}`
				})
			},
			// 去商品详情
			goGoods(id) {
				if (this.orderData.order_type == "normal") {
					uni.navigateTo({
						url: `/mall/product/product?id=${id}`
					})
				} else if (this.orderData.order_type == "service_station"){
					uni.navigateTo({
						url: `/mall/enjoyMall/enjoyProduct?id=${id}`
					})
				}
			},
			goComment() {
				uni.navigateTo({
					url: "/mall/product/commentPost?orderId=" + this.id
				})
			},
			wordTime(int) {
				let _self = this;
				let hour = parseInt(int / 3600);
				let minute = parseInt((int % 3600) / 60);
				this.time = hour + "小时" + minute + "分钟"
			},
			copy(type) {
				if (type == 1) {
					uni.setClipboardData({
						data: this.orderData.order_id,
						success: function() {
							uni.showToast({
								icon: "none",
								title: "复制成功"
							})
						}
					});
				} else {
					uni.setClipboardData({
						data: this.orderData.delivery_id,
						success: function() {
							uni.showToast({
								icon: "none",
								title: "复制成功"
							})
						}
					});
				}

			},
			checkMoney() {
				if (this.orderData.pay_price > 0) {
					//#ifndef APP-PLUS
					this.pay()
					//#endif
					//#ifdef APP-PLUS
					this.$refs.choosePay.show()
					//#endif
				} else {
					this.keyboradShow = true
				}
			},
			finished(password) {
				uni.showLoading({
					mask:true
				})
				checkPassword({
					password: password
				}, this.keyboradClose()).then(res => {
					this.pay()
				})
			},
			confirm(e) {
				this.payType = e.payType
				this.provider = e.provider
				this.pay()
			},
			pay() {
				let _self = this
				uni.showLoading({mask:true})
				orderPay({
					uni: _self.orderData.order_id,
					paytype: _self.payType,
					from: _self.from
				}).then(res => {
					uni.hideLoading()
					if (res.data.status == "ZERO_SUCCESS") {
						uni.showToast({
							title: "支付成功"
						})
						setTimeout(function() {
							uni.redirectTo({
								url: "/mall/order/orderDetail?id=" + res.data.result.order_id
							})
						}, 300);
					} else if (res.data.status == "WECHAT_PAY" || res.data.status == "ALIPAY") {
						//#ifdef MP-WEIXIN
						// 小程序支付
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.data.result.jsConfig.timestamp,
							nonceStr: res.data.result.jsConfig.nonceStr,
							package: res.data.result.jsConfig.package,
							signType: res.data.result.jsConfig.signType,
							paySign: res.data.result.jsConfig.paySign,
							success: function(re) {
								uni.redirectTo({
									url: "/mall/order/orderDetail?id=" + res.data.result.order_id
								})
							}
						});
						//#endif

						// #ifdef APP-PLUS
						uni.requestPayment({
							provider: this.provider,
							orderInfo: res.data.result.jsConfig,
							success: (e) => {
								uni.redirectTo({
									url: "/mall/order/orderDetail?id=" + res.data.result.order_id
								})
							},
							fail: (err) => {
								console.log(err)
							}
						})
						// #endif
						//#ifdef H5
						// h5支付
						let url = "/mall/order/orderDetail?id=" + res.data.result.order_id
						wechat.pay(res.data.result.jsConfig, url, false)
						//#endif
					}
				})
			},
			keyboradClose() {
				this.keyboradShow = false
			}
		},
		onHide() {
			this.keyboradShow = false
		}
	};
</script>

<style lang="scss" scoped>
	// 模态框

	.header {
		.orderStatus {
			position: relative;
			height: 150rpx;
			background: linear-gradient(90deg, rgba(249, 47, 23, 1) 0%, rgba(252, 124, 49, 1) 100%);
			width: 702upx;
			padding: 0 24upx;
			display: flex;
			align-items: center;
			overflow: hidden;

			image {
				margin-top: -20rpx;
				width: 34rpx;
				height: 34rpx;
				position: relative;
				z-index: 2;
			}

			text {
				margin-top: -20rpx;
				margin-left: 10rpx;
				font-size: 34rpx;
				line-height: 34rpx;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
				position: relative;
				z-index: 2;
			}

			.a {
				position: absolute;
				left: -20rpx;
				top: 10rpx;
				width: 225rpx;
				height: 225rpx;
				border-radius: 50%;
				background-color: #FB5A14;
			}

			.b {
				position: absolute;
				left: 205rpx;
				top: -15rpx;
				width: 36rpx;
				height: 36rpx;
				border-radius: 50%;
				background-color: #FF7F47;
			}
		}

		// 订单号
		.ordnum {
			width: 686upx;

			// height: 108upx;
			view {
				width: 686upx;
				display: flex;
				justify-content: space-between;

				.one {
					font-size: 24upx;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
					margin-bottom: 23upx;
				}

				.two {
					color: rgba(153, 153, 153, 1);
					font-size: 24upx;
					font-weight: 400;
				}
			}
		}
	}

	.site {
		position: relative;
		z-index: 2;
		background-color: #fff;
		border-bottom: 20rpx solid #eee;
		height: 170upx;
		border-radius: 20rpx 20rpx 0 0;
		margin-top: -20rpx;
		padding: 0 24rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;

		.name {
			font-size: 28upx;
			display: flex;
			font-weight: bold;
			margin-bottom: 10rpx;

			text:nth-of-type(2) {
				margin-left: 50rpx;
				color: rgba(51, 51, 51, 1);
			}
		}

		.sit {
			font-size: 24rpx;
			color: rgba(153, 153, 153, 1);
		}
	}

	// 订单信息 收货
	.messages {
		padding: 0 24rpx;
		border-bottom: 20rpx solid #eee;

		.express {
			position: relative;
			height: 168rpx;
			display: flex;
			align-items: center;

			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 40rpx;
			}

			.son {
				margin-left: 20rpx;
				width: 550upx;
				height: 80upx;
				position: relative;

				text:nth-of-type(1) {
					font-size: 28upx;
					color: rgba(51, 51, 51, 1);
				}

				text:nth-of-type(2) {
					font-size: 22upx;
					color: rgba(153, 153, 153, 1);
				}

				image {
					position: absolute;
					top: 18upx;
					right: 32upx;
					height: 22upx;
					width: 22upx;
				}
			}

			.icon-you {
				position: absolute;
				color: #666;
				right: 0;
				top: 50%;
				margin-top: -10rpx;
			}
		}

		// 收货地址
	}

	// 标题
	.storeTitle {
		padding: 0 24rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		line-height: 50rpx;
		color: #333;

		image {
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
		}

		.title {
			margin-left: 15rpx;
			font-size: 28rpx;
		}

		.icon-you {
			margin-top: 4rpx;
			margin-left: 15rpx;
			font-size: 28rpx;
		}
	}

	.titleitem {
		border-bottom: 20rpx solid #eee;
		padding: 0 24rpx 40rpx;

		.item {
			margin-top: 30upx;
			display: flex;

			.img {
				width: 140upx;
				height: 140upx;
				background: rgba(220, 220, 220, 1);

				image {
					width: 140upx;
					height: 140upx;
				}
			}

			.msg {
				width: 540upx;
				margin-left: 20upx;

				.clamp1 {
					height: 30upx;
					line-height: 30upx;
					font-size: 26upx;
					font-weight: 500;
					color: rgba(51, 51, 51, 1);
				}

				.a {
					display: flex;
					height: 80upx;
					line-height: 80upx;
					justify-content: space-between;
					font-size: 20upx;
					color: #999;

					text:nth-of-type(1) {
						flex: 1;
					}
				}

				.b {
					display: flex;
					height: 30upx;
					line-height: 30upx;
					justify-content: space-between;

					.refunding {
						color: #F0AD4E;
						border: 1rpx solid #F0AD4E;
						line-height: 28rpx;
						height: 30rpx;
						padding: 0 6rpx;
						border-radius: 8rpx;
						font-size: 22rpx;
						box-sizing: border-box;
					}

					view {
						display: flex;
						justify-content: space-between;

						text:nth-of-type(1) {
							font-size: 14upx;
							font-weight: bold;
							color: #FB3737;
						}

						text:nth-of-type(2) {
							font-size: 24upx;
							font-weight: bold;
							color: #FB3737;
						}
					}
				}

				.btn {
					float: right;
					font-size: 22rpx;
					height: 56rpx;
					line-height: 56rpx;
					padding: 0 30rpx;
					margin-top: 20rpx;
					border: 1rpx solid #999;
					color: #333;
					border-radius: 30rpx;
				}
			}
		}
	}

	.info {
		border-bottom: 20rpx solid #eee;
		padding: 20rpx 0;

		.cellBox {
			padding: 10rpx 24rpx;
			font-size: 26rpx;
			color: rgba(51, 51, 51, 1);

			.cell {
				line-height: 60rpx;
				display: flex;
				align-items: center;

				.a {
					width: 160rpx;
				}

				.b {
					font-weight: bold;
				}

				.c {
					margin-left: 20rpx;
					width: 70rpx;
					height: 30rpx;
					background: rgba(238, 238, 238, 1);
					border-radius: 15rpx;
					line-height: 30rpx;
					text-align: center;
					font-size: 18rpx;
				}
			}
		}
	}

	.price {
		padding: 30rpx 24rpx;
		border-bottom: 20rpx solid #eee;

		.cell {
			font-size: 26rpx;
			color: rgba(51, 51, 51, 1);
			line-height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.b {
				font-weight: bold;
			}

			.color {
				color: #FB3737;
			}
		}

		.cellTotal {
			font-size: 26rpx;
			color: rgba(51, 51, 51, 1);
			line-height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			.b {
				font-weight: bold;
			}

			.rmb {
				font-weight: bold;
			}

			.color {
				font-size: 34rpx;
				color: #FB3737;
			}
		}
	}

	.cut {
		height: 100rpx;
		height: calc(env(safe-area-inset-bottom) + 100rpx);
	}


	.footer {
		position: fixed;
		width: 750upx;
		height: 100rpx;
		bottom: 0;
		bottom: env(safe-area-inset-bottom);
		display: flex;
		justify-content: flex-end;
		align-items: center;
		text-align: center;
		font-size: 22upx;
		z-index: 1;
		border-top: 1rpx solid #eee;
		background-color: #fff;

		.btn {
			margin-right: 20rpx;
			height: 60rpx;
			line-height: 60rpx;
			padding: 0 30rpx;
			border: 1rpx solid #999;
			color: #333;
			border-radius: 30rpx;
		}

		.act {
			border: 1rpx solid #FB3737;
			color: #fff;
			background-color: #FB3737;
		}

		.contact {
			position: absolute;
			left: 20rpx;
			top: 20rpx;
			margin: 0;
		}

		.gray {
			border: 1rpx solid #bbb;
			color: #bbb;
		}
	}

	.sellerType {
		width: 542rpx;
		background-color: #fff;
		border-radius: 8rpx;
		padding: 0 30rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		position: relative;

		.close {
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			width: 24rpx;
			height: 24rpx;
		}

		.title {
			font-size: 34rpx;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
		}

		.radioBox {
			max-height: 70vh;
			overflow-y: auto;

			.uni-list-cell {
				display: flex;
				justify-content: space-between;
				height: 100rpx;
				border-bottom: 1rpx solid #eee;
				align-items: center;

				.left {
					display: flex;
					align-items: center;

					image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 10rpx;
					}

					view {
						margin-left: 10rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						width: 350rpx;
						line-height: 30rpx;
						text-align: left;

						text:nth-of-type(1) {
							font-size: 28rpx;
							color: #333;
						}

						text:nth-of-type(2) {
							margin-top: 10rpx;
							font-size: 20rpx;
							color: #999;
						}
					}
				}
			}

			.uni-list-cell:nth-of-type(1) {
				border-bottom: 1rpx solid #f5f5f5;
			}
		}

		.btnBox {
			padding: 40rpx 0;

			.btn {
				height: 70rpx;
				line-height: 70rpx;
				border-radius: 40rpx;
				font-size: 24rpx;
				text-align: center;
				color: #fff;
				background-color: $mall-price;
			}
		}
	}
</style>
